import { cn } from '@/lib/utils';

interface SidebarProps {
  isCollapsed: boolean;
  onToggle: () => void;
  activeView: string;  
  onViewChange: (view: string) => void;
  storageUsed: number;
  storageTotal: number;
}

export default function Sidebar({ isCollapsed, onToggle, activeView, onViewChange, storageUsed, storageTotal }: SidebarProps) {
  return (
    <aside className={cn(
      "bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300",
      isCollapsed ? "w-16" : "w-64"
    )}>
      <div className="h-full flex flex-col">
        {/* Logo区域 */}
        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
          {!isCollapsed && (
            <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
              罐头网盘
            </h1>
          )}
          {isCollapsed && (
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white">
              <i class="fa-solid fa-cloud"></i>
            </div>
          )}
          <button 
            onClick={onToggle}
            className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          >
            <i class={`fa-solid ${isCollapsed ? 'fa-angle-right' : 'fa-angle-left'}`}></i>
          </button>
        </div>
        
        {/* 导航菜单 */}
        <nav className="flex-1 py-4 overflow-y-auto">
          <ul className="space-y-1 px-3">
            <li>
              <button
                onClick={() => onViewChange('files')}
                className={cn(
                  "flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-colors",
                  activeView === 'files' 
                    ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400" 
                    : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                )}
              >
                <i class="fa-solid fa-folder text-lg w-5 text-center"></i>
                {!isCollapsed && <span>我的文件</span>}
              </button>
            </li>
            <li>
              <button
                onClick={() => onViewChange('storage')}
                className={cn(
                  "flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-colors",
                  activeView === 'storage' 
                    ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400" 
                    : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                )}
              >
                <i class="fa-solid fa-hdd text-lg w-5 text-center"></i>
                {!isCollapsed && <span>存储概览</span>}
              </button>
            </li>
            <li>
              <button
                onClick={() => onViewChange('settings')}
                className={cn(
                  "flex items-center gap-3 w-full px-3 py-2 rounded-lg transition-colors",
                  activeView === 'settings' 
                    ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400" 
                    : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
                )}
              >
                <i class="fa-solid fa-cog text-lg w-5 text-center"></i>
                {!isCollapsed && <span>连接设置</span>}
              </button>
            </li>
          </ul>
          
          {!isCollapsed && (
            <div className="mt-8 px-4">
              <h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-3">
                存储空间
              </h3>
              <div className="px-3">
                 <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mb-2">  
                   <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${(storageUsed / storageTotal) * 100}%` }}></div>
                 </div>
                 <p className="text-sm text-gray-500 dark:text-gray-400 text-right">
                   {storageUsed.toFixed(2)} GB / {storageTotal} GB
                </p>
              </div>
            </div>
          )}
        </nav>
        
        {/* 底部 */}
        {!isCollapsed && (
          <div className="p-4 border-t border-gray-200 dark:border-gray-700">
            <div className="bg-gray-100 dark:bg-gray-700/50 rounded-lg p-3 text-sm">
              <p className="text-gray-500 dark:text-gray-400 mb-1">
                <i class="fa-solid fa-info-circle mr-1"></i> 数据托管于
              </p>
              <p className="font-medium">192.168.2.2</p>
            </div>
          </div>
        )}
      </div>
    </aside>
  );
}